<div th:fragment="html">
    <div id="emailRecordDiv">
        <table class="inputTable ">
            <tr>
                <td width="15%" align="right">
                    <span data-toggle="tooltip" data-placement="top">请选择指数:</span>
                </td>
                <td width="15%">
                    <select v-model="taskremind.fundcode" class="indexSelect form-control" @click="queryTask(0)">
                        <option value="" selected>全部</option>
                        <option v-for="bean in fundMains " :value="bean.code">{{bean.fundname}} - ( {{bean.code}} )</option>
                    </select>
                </td>
                <td width="20%" align="right">
                    <span data-toggle="tooltip" data-placement="top">涨跌标志:</span>
                </td>
                <td width="15%">
                    <select class="form-control" v-model="taskremind.updownFlag">
                        <option value="-1">全部</option>
                        <option value="0">跌</option>
                        <option value="1">涨</option>
                    </select>
                </td>
                <td width="20%" align="right">
                    <span data-toggle="tooltip" data-placement="top">是否已通知:</span>
                </td>
                <td width="15%">
                    <select class="form-control" v-model="taskremind.isnotice">
                        <option value="-1">全部</option>
                        <option value="0">未通知</option>
                        <option value="1">已通知</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="2"></td>
                <td></td>
                <td>
                    <button type="button" class="btn btn-success" @click="queryTask(1)">查询</button>
                </td>
                <td>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addTaskMod">新增
                    </button>
                </td>
            </tr>
        </table>

        <!--            新增邮箱通知窗口-->
        <div class="modal fade" id="addTaskMod" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span
                                class="sr-only">Close</span></button>
                        <h4 class="modal-title">新增邮件通知</h4>
                    </div>

                    <div>
                        <table class="inputTable">
                            <tr>
                                <td align="right" width="25%">基金代码:</td>
                                <td width="25%">
                                    <select v-model="addTaskRemind.fundcode" class="indexSelect form-control">
                                        <option v-for="bean in fundMains " :value="bean.code">{{bean.fundname}} - (
                                            {{bean.code}} )
                                        </option>
                                    </select>
                                </td>
                                <td align="right" width="25%">涨跌标志:</td>
                                <td width="25%">
                                    <select class="form-control" v-model="addTaskRemind.updownFlag">
                                        <option value="0">跌</option>
                                        <option value="1">涨</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">单位净值:</td>
                                <td><input type="text" class="form-control" v-model="addTaskRemind.dwjz"></td>
                            </tr>
                        </table>
                    </div>

                    <div class="modal-footer" style="text-align:center;">
                        <button class="btn btn-primary" @click="addTask" type="button">新增</button>
                        <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="label label-warning">提醒任务</div>
        <table class="table table-striped table-bordered table-condensed">
            <thead>
            <th>任务ID</th>
            <th>基金代码</th>
            <th>基金名称</th>
            <th>涨跌标志</th>
            <th>单位净值</th>
<!--            <th>收件人</th>-->
            <th>是否已通知</th>
            <th>通知时间</th>
            <th>创建时间</th>
            <th>操作</th>
            </thead>
            <tbody>
            <tr v-for="bean in taskReminds">
                <td>{{bean.id}}</td>
                <td>{{bean.fundcode}}</td>
                <td>
                        <span v-for="taskIndexName in fundMains">
                            <span v-if="taskIndexName.code==bean.fundcode">{{taskIndexName.fundname}}</span>
                        </span>
                </td>
                <td>
                    <span v-if="bean.updownFlag==1" class="label label-danger">涨</span>
                    <span v-if="bean.updownFlag==0" class="label label-success">跌</span>
                </td>
                <td>{{bean.dwjz}}</td>
<!--                <td>{{bean.addressee}}</td>-->
                <td>
                    <span v-if="bean.isnotice==1" class="label label-danger">已通知</span>
                    <span v-if="bean.isnotice==0">未通知</span>
                </td>
                <td>
                    <span v-if="bean.isnotice==1" class="label label-danger">{{bean.updateDate | formatDateFilter }}</span>
                </td>
                <td>{{bean.createDate | formatDateFilter }}</td>
                <td>
                    <button type="button" class="btn btn-success" v-if="bean.isnotice==0" @click="editTaskMod(bean.id)">
                        修改
                    </button>
                </td>
            </tr>
            </tbody>
        </table>

        <!--            修改邮件通知窗口-->
        <div class="modal fade" id="editTaskRemindMod" tabindex="-1" data-backdrop="static" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span
                                class="sr-only">Close</span></button>
                        <h4 class="modal-title">修改邮件通知</h4>
                    </div>

                    <div>
                        <table class="inputTable">
                            <input type="text" class="form-control" v-model="editTaskRemind.id" style="display:none;">
                            <tr>
                                <td align="right" width="25%">基金代码:</td>
                                <td width="25%">
                                    <select v-model="editTaskRemind.fundcode" class="indexSelect form-control" disabled>
                                        <option v-for="bean in fundMains " :value="bean.code">{{bean.fundname}} - (
                                            {{bean.fundcode}} )
                                        </option>
                                    </select>
                                </td>
                                <td align="right" width="25%">涨跌标志:</td>
                                <td width="25%">
                                    <select class="form-control" v-model="editTaskRemind.updownFlag" disabled>
                                        <option value="0">跌</option>
                                        <option value="1">涨</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">单位净值:</td>
                                <td><input type="text" class="form-control" v-model="editTaskRemind.dwjz"></td>
<!--                                <td align="right">收件人:</td>-->
<!--                                <td><input type="text" class="form-control" v-model="editTaskRemind.addressee"></td>-->
                            </tr>
                        </table>
                    </div>

                    <div class="modal-footer" style="text-align:center;">
                        <button class="btn btn-primary" @click="editTask" type="button">修改</button>
                        <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                    </div>
                </div>
            </div>
        </div>

        <!--            分页-->
        <div style="text-align:center;">
            <div th:replace="./include/page::html"></div>
        </div>

    </div>

    <script>
        $(function () {
            var emailRecordVue = {
                fundMains: [],
                taskremind:{fundcode:'',updownFlag:'-1',isnotice:'-1'},

                pagination: {},
                // pageSize: '10',
                taskReminds:[],

                addTaskRemind:{fundcode:'004241',updownFlag:'0',dwjz:''},
                editTaskRemind:{},
            };
            var vue = new Vue({
                el: '#emailRecordDiv',
                data: emailRecordVue,
                mounted: function () {
                    this.mainList();
                    this.$nextTick(function () {
                        this.queryTask(0);
                    });
                },
                methods: {
                    mainList:function(){
                        // 记得改
                        var url = "/fundmains/list";
                        axios.get(url).then(function (response) {
                            vue.fundMains = response.data.list;
                        });
                    },
                    queryTask:function (start) {
                        if (undefined == vue.pagination.size)
                            vue.pagination.size = 10;
                        if(undefined == vue.taskremind.fundcode){
                            return;
                        }

                        var url = "/taskreminds/list/"+vue.pagination.size+"/"+start;
                        axios.post(url,vue.taskremind).then(function(response) {
                            vue.pagination = response.data.pagination;
                            vue.taskReminds = vue.pagination.records;
                        });
                    },
                    addTask:function () {
                        if ("" == vue.addTaskRemind.dwjz) {
                            alert("单位净值不允许为空!");
                        // }else if(""==vue.addTaskRemind.addressee){
                        //     alert("收件人不允许为空!");
                        }else{
                            var url =  "/taskreminds/add";
                            axios.post(url,vue.addTaskRemind).then(function(response) {
                                alert(response.data.msg);
                                $("#addTaskMod").modal('hide');
                                vue.addTaskRemind={fundcode:vue.addTaskRemind.fundcode,updownFlag:'0',dwjz:''};
                                vue.queryTask(vue.pagination.current);
                            });
                        }
                    },
                    editTaskMod:function (id) {
                        var url = "/taskreminds/getById/"+id;
                        axios.get(url).then(function(response) {
                            vue.editTaskRemind = response.data;
                            $("#editTaskRemindMod").modal('show');
                        });
                    },
                    editTask:function () {
                        var url = "/taskreminds/edit";
                        axios.post(url,vue.editTaskRemind).then(function(response){
                            alert(response.data.msg);
                            $("#editTaskRemindMod").modal('hide');

                            vue.taskremind.fundcode=vue.editTaskRemind.fundcode;
                            vue.queryTask(vue.pagination.current);
                            vue.editTaskRemind={};
                        });
                    },

                    ChangePageSize: function () {
                        vue.queryinvest(vue.pagination.current);
                    },
                    jump: function(page){
                        if('first'== page && !vue.pagination.isfirst)
                            vue.queryTask(1);
                        else if('pre'== page && !vue.pagination.isfirst)
                            vue.queryTask(vue.pagination.current-1);
                        else if('next'== page && !vue.pagination.islast)
                            vue.queryTask(vue.pagination.current+1);
                        else if('last'== page && !vue.pagination.islast)
                            vue.queryTask(vue.pagination.pages);
                    },
                    jumpByNumber: function(start){
                        if(vue.pagination.current != start){
                            vue.queryTask(start);
                        }
                    },
                }
            });
        });
    </script>

</div>